<template>

      <transition name="move">
          <div  v-show="showFlag" class="food" ref="food">
                <div class="food-content">
                     <div class="image-header">
                           <img :src="food.image">
                            <div class="back" @click="hide">
                               <i class="iconfont icon-fanhui1"></i>
                            </div>
                     </div>
                     <div class="content">
                           <h1 class="title">
                               {{food.name}}
                           </h1>
                           <div class="detail">
                              <span class="sell-count">月售{{food.sellCount}}份</span>
                              <span class="rating">好评率{{food.rating}}</span>
                           </div>
                           <div class="price">
                               <span class="now">¥{{food.price}}</span><span class="old" v-show="food.oldPrice">¥{{food.oldPrice}}</span>
                           </div>
                           <div class="cartcontrol-wrapper">
                             <cartcontraol :food="food"></cartcontraol>
                           </div>
                           <transition name="fade">
                             <div @click.stop.prevent="addFirst" class="buy" v-show="!food.count||food.count===0">
                               加入购物车
                             </div>
                           </transition>
                     </div>

                      <div class="info" v-show="food.info">
                          <h1 class="title">商品信息</h1>
                          <p class="text">{{food.info}}</p>
                      </div>
                      <split></split>
                      <div class="rating">
                           <h1 class="title">商品评价</h1>
                           <ratingselect :select-type="selectType"
                                         :only-content="onlyContent"
                                         :desc="desc"
                                         :ratings="food.ratings"
                                         @setselectType="setselectType"
                                         @changeonlyContent="changeonlyContent"></ratingselect>
                      </div>

                       <div class="rating-wrapper">
                           <ul v-show="food.ratings && food.ratings.length">
                               <li v-show="needShow(rating.rateType,rating.text)" v-for="rating in food.ratings" class="rating-item border-1px">
                                   <div class="user">
                                       <span class="name">
                                            {{rating.username}}
                                       </span>
                                        <img class="avatar" width="12" height="12" :src="rating.avatar"/>
                                   </div>
                                    <div class="time" >{{rating.rateTime |formatDate}}</div>
                                    <p class="text">
                                        <span class="iconfont" :class="{'icon-dianzan':rating.rateType===0,'icon-quxiaodianzan':rating.rateType===1}"></span>{{rating.text}}
                                    </p>
                               </li>
                           </ul>
                          <div class="no-rating" v-show="!food.ratings||!food.ratings.length">
 暂无评价
                          </div>
                       </div>

                </div>
          </div>
      </transition>
</template>

<script>
  import BScroll from 'better-scroll';
  import Vue from  'vue';
  import {formatDate} from "../../common/js/date";
  import cartcontraol from '@/components/cartcontrol/cartcontrol';
  import ratingselect from '@/components/ratingselect/ratingselect';
  import split from '@/components/split/split';
  const POSITIVE=0;
  const NEGATIVE=1;
  const ALL=2;

    export default {
      components:{
        cartcontraol,
        split,
        ratingselect
      },
        name: "food",
        data(){
          return{
            showFlag:false,
            showone: true,
            selectType:ALL,
            onlyContent: true,
            desc:{
              all:'全部',
              positive:'推荐',
              negative:'吐槽'
            }
          }
        },
        props:{
          food:{
            type:Object
          }
        },
      filters:{
        formatDate(time){
             let date=new Date(time);
             return formatDate(date,'yyyy-MM-dd hh:mm');
        }
      },
      methods:{
        needShow(type,text){
          if(this.onlyContent&&!text){
             return false;
          }
          if(this.selectType==ALL){
            return true;
          }else{
            return type===this.selectType;
          }
        },
        changeonlyContent(){
          this.onlyContent=!this.onlyContent;
        },
        setselectType(type){
          this.selectType=type;
        },
        addFirst(event){
           if(!event._constructed){
                return;
           }
           this.$emit('cart-add',event.target);//抛物线小球动画  没有实现
           Vue.set(this.food,'count',1);
        },
        hide(){
          this.showFlag=false;
        },
        show(){
           this.showFlag=true;
           this.selectType=ALL;//保持初始化
           this.onlyContent=true;// 保持初始化  内容字段
          this.$nextTick(()=>{
            if(!this.scroll){
                this.scroll=new BScroll( this.$refs['food'],{
                   click:true
                })
            }else {
              this.scroll.refresh();
            }


          })
        }
       },
      watch:{
        selectType:function (type) {
           this.selectType=type;
           this.$nextTick(()=>{
             this.scroll.refresh();
           })



        },
        onlyContent:function (onlyContent) {
          this.onlyContent=onlyContent;

          this.$nextTick(()=>{
            this.scroll.refresh();
          })

        }
      }
    }
</script>

<style lang="less" scoped>
  @import "../../common/stylus/mlxin";
     .food{
       position: fixed;
       left:0;
       top:0;
       bottom:48px;
       z-index:30;
       width: 100%;
       background: #fff;
       &.move-enter-active {
         transition: all .2s linear;
         transform: translate3d(0,0,0);
       }
       &.move-leave-active {
         transition: all .2s linear;
         transform: translate3d(0,0,0);
       }
       &.move-enter, &.move-leave-to
         /* .slide-fade-leave-active for below version 2.1.8 */ {
         transform: translate3d(100%,0,0);
       }

       .image-header{
         position: relative;
         width: 100%;
         height: 0;
         padding-top: 100%;
         img{
            position: absolute;
            top:0;
             left:0;
             width: 100%;
             height: 100%;
         }
         .back{
            position: absolute;
            top:10px;
            left:0;
             .icon-fanhui1{
                 display: block;
                  padding: 10px;
                  font-size: 20px;
               color: #fff;
             }

         }
       }
       .content{
         position: relative;
         padding: 18px;
         .title{
           line-height: 14px;
           margin-bottom: 8px;
           font-size: 14px;
           font-weight: 700;
           color: rgb(7,17,27);
         }
         .detail{
           margin-bottom: 18px;
           line-height: 10px;
           height: 10px;
           font-size: 0;
           .sell-count,rating{
               font-size: 10px;
                color: rgb(147,153,159);
           }
           .sell-count{
             margin-right: 12px;
           }
         }
         .price{
           font-weight: 700;
           line-height: 24px;
           .now{
             margin-right: 8px;
             font-size: 14px;
             color:rgb(240,20,20)
           }
           .old{
             text-decoration: line-through;
             font-size: 10px;
             color:rgb(147,153,159)
           }


         }
         .cartcontrol-wrapper{
           position: absolute;
           right: 12px;
           bottom: 12px;
         }
         .buy{
           position: absolute;
           right: 18px;
           bottom: 18px;
           z-index: 10;
           height: 24px;
           line-height: 24px;
           padding: 0 12px;
           box-sizing: border-box;
           border-radius: 12px;
           font-size: 10px;
           color: #fff;
           background: rgb(0,160,220);
           &.fade-enter-active{
             transition: all .2s;
             opacity: 1;
           }
           &.fade-leave-active {
             transition: all .2s;
           }
           &.fade-enter,&.fade-leave-to{
             opacity: 0;
           }
         }
       }

       .info{
         padding: 18px;
         .title{
           line-height: 14px;
           margin-bottom: 6px;
           font-size: 14px;
           color: rgb(7,17,27);
         }
         .text{
           line-height: 24px;
           padding: 0 8px;
           font-size: 12px;
           color: rgb(77,85,93);
         }
       }
       .rating{
         padding-top:18px;
         .title{
               line-height: 14px;
               margin-left: 18px;
               font-size: 14px;
               color: rgb(7,17,27);
         }

       }

       .rating-wrapper{
         padding: 0 18px;
         .rating-item{
           position:relative;
           padding: 16px 0;
           .user{
             position: absolute;
             right: 0;
             top: 16px;
             line-height: 12px;
             font-size: 0;
             .name{
               display: inline-block;
               margin-right: 6px;
               vertical-align: top;
               font-size: 10px;
               color:rgb(147,153,159)
             }
             .avatar{
               border-radius: 50%;
             }
           }
           .time{
             margin-bottom: 6px;
             line-height: 12px;
             font-size: 10px;
             color:rgb(147,153,159)
           }
           .text{
             line-height: 16px;
             font-size: 12px;
             color: rgb(7,17,27);
             .icon-quxiaodianzan,.icon-dianzan{
               line-height: 16px;
               margin-right: 4px;
               font-size: 12px;
             }
             .icon-quxiaodianzan{
               color:rgb(147,153,159)

             }
             .icon-dianzan{
               color:rgb(0,160,220)
             }
           }
         }
         .no-rating{
           padding: 16px 0;
           font-size: 12px;
           color: rgb(147,153,159);
         }
       }
     }

     /* 可以设置不同的进入和离开动画 */
     /* 设置持续时间和动画函数 */

</style>
